import React, { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';

const LoginError = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  
  useEffect(() => {
    const msg = searchParams.get('msg') || '登录失败';
    console.log('登录错误信息:', msg);
  }, [searchParams]);

  const msg = searchParams.get('msg') || '登录失败';

  return (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    }}>
      <div style={{
        background: 'white',
        padding: '40px',
        borderRadius: '12px',
        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)',
        textAlign: 'center',
        maxWidth: '400px',
        width: '90%'
      }}>
        <div style={{ fontSize: '48px', marginBottom: '20px' }}>❌</div>
        <h2 style={{ color: '#333', marginBottom: '15px' }}>登录失败</h2>
        <p style={{ color: '#666', marginBottom: '25px' }}>{msg}</p>
        <button 
          style={{
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            border: 'none',
            padding: '12px 30px',
            borderRadius: '6px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
          onClick={() => navigate('/login')}
        >
          返回登录
        </button>
      </div>
    </div>
  );
};

export default LoginError; 